<template>
  <div class="advertising">
    <el-form ref="form" :model="form" label-width="207px">
      <el-form-item label="是否开启">
        <el-radio-group v-model="form.isOpen" >
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="color:#8a8a8a; margin:0;font-size:14px;">开启后只在电脑端显示，手机端不显示。</p>
      </el-form-item>
      <el-form-item label="游客一直显示">
        <el-radio-group v-model="form.isDisplay">
          <el-radio label="1">开启</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
        <p style="color:#8a8a8a; margin:0;font-size:14px;">
          此项开起，游客关闭广告后，刷新页面，还将看到广告。
          <br>登录用户，关闭广告后，不再显示
        </p>
      </el-form-item>
      <el-form-item label="图片上传">
        <img v-if="form.fileUrl" :src="form.fileUrl" alt class="img">
        <el-upload
          :on-change="handleChange"
          :http-request="uploadFile"
          :limit="1"
          action=""
          class="upload-demo"
          accept="image/jpg, image/gif, image/png"
        >
          <el-button size="small" type="primary" style="text-align: left">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，图片建议不要超过1920*110,且不超过500kb。</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间"/>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间"/>
      </el-form-item>
      <el-form-item label="链接地址">
        <el-input v-model="form.url" placeholder="http://"/><span style="color: red">&nbsp;&nbsp;{{ checkMssage }}</span>
      </el-form-item>
      <el-form-item label="图片描述">
        <el-input v-model="form.description"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAdvertiseConfig, updateAdvertiseConfig } from '@/api/operate/zerotheme'
import { upLoadFile } from '@/api/upLoadFile' // 数据接口
import { getTenantId, getUserId } from '@/utils/auth'
export default {
  data() {
    return {
      reg: /^((https|http|ftp|rtsp|mms){0,1}(:\/\/){0,1})(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/,
      checkMssage: '',
      form: {
        isOpen: '1',
        isDisplay: '0',
        fileId: '',
        fileUrl: '',
        startTime: '',
        endTime: '',
        url: '',
        description: ''
      },
      file: ''
    }
  },
  watch: {
    form: {
      handler(newForm, oldForm) {
        if (!this.reg.test(newForm.url)) {
          this.checkMssage = '输入的值并不是一个合法的网址，请重新输入！'
        } else {
          this.checkMssage = ''
        }
      },
      // 深度监听
      deep: true,
      // 设定初始值时也会触发监听
      immediate: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getAdvertiseConfig(getTenantId()).then(response => {
        if (response.data.item) {
          this.form = response.data.item
          this.form.isOpen = response.data.item.isOpen.toString()
          this.form.isDisplay = response.data.item.isDisplay.toString()
          this.form.fileId = response.data.item.fileId
          this.form.fileUrl = response.data.item.fileUrl
        }
      })
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.userId = getUserId()
          this.form.tenantId = getTenantId()
          updateAdvertiseConfig(this.form).then(response => {
            this.$notify({
              title: '成功',
              message: '保存成功！',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          this.$message.success('保存失败！')
          return false
        }
      })
    },
    handleChange(file) {
      this.file = file.raw
    },
    uploadFile() {
      const fileForm = new FormData()
      fileForm.append('name', this.file.name)
      fileForm.append('uid', this.file.uid)
      fileForm.append('file', this.file)
      upLoadFile(fileForm).then(response => {
        this.form.fileId = response.data.id
        this.form.fileUrl = response.data.url
      })
    }
  }
}
</script>

<style lang="scss">
.advertising {
  .el-form {
    .el-input {
      width: 400px;
    }
  }
}
</style>
